<template>
  <div class="container">
    <pre><code class="hljs" v-html="xmlContent"></code></pre>
    <input class="bm-search-input" type="text" placeholder="请输入商品名称" v-model="searchText">

    <el-table :data="renderBmGoodList">
      <!--      <el-table-column
                prop="image"
                label="图片"
                width="100">
              <template slot-scope="scope">
                <el-image
                    style="width: 100px; height: 150px"
                    :src="scope.row.media_gallery_entries[0]?.file"
                    :fit="fit"></el-image>
              </template>
            </el-table-column>-->
      <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
          width="200">
      </el-table-column>
      <el-table-column
          prop="sku"
          label="sku"
          width="200">
      </el-table-column>
    </el-table>
    <!--    <div class="bm-container">-->
    <!--      <div class="bm-goods" v-for="(item,index) in bmGoodList">-->
    <!--        <div class="bm-img">-->
    <!--          <img class="bm-image" :src="item.media_gallery_entries[0]?.file">-->
    <!--          &lt;!&ndash;          <div>aaa</div>&ndash;&gt;-->
    <!--        </div>-->
    <!--        <div class="bm-goods-info">-->
    <!--          <div class="bm-goods-name">{{ item.name }}</div>-->
    <!--          <div class="bm-goods-desc">{{ item.sku }}</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>

</template>

<script>
import {bmGoodList} from '../../../api/bmApi'
import xmlFormat from 'xml-formatter';
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
export default {
  data() {
    return {
      searchText: '',
      xmlContent:'',
      bmGoodList: [
        {
          media_gallery_entries: [
            {
              file: ''
            }
          ],
          name: '',
          sku: ''
        }
      ],
      renderBmGoodList: [
        {
          media_gallery_entries: [
            {
              file: ''
            }
          ],
          name: '',
          sku: ''
        }
      ]
    }
  },
  watch: {
    searchText: function (newValue, oldValue) {
      if (newValue.trim() === '') {
        this.renderBmGoodList = this.bmGoodList
      } else {
        this.renderBmGoodList = this.bmGoodList.filter((item) => {
          return item && item.name && item.name.toLowerCase().includes(newValue.toLowerCase())
        })
      }
    }
  },
  methods: {
    getBmList() {
      console.log('getBmList.......')
      let res = xmlFormat('<root><content><p xml:space="preserve">This is <b>some</b> content.</content></p>');
      res = hljs.highlight('xml',res,true).value
      console.log('经过格式化的内容为：', res)
      this.xmlContent = res
      bmGoodList().then((resp, rej) => {
        console.log(resp)
        this.bmGoodList = resp.data.items
        this.renderBmGoodList = this.bmGoodList
      })
    }
  },
  mounted() {
    this.getBmList()
  }
}
</script>

<style lang="scss" scoped>
.el-table--small {
  padding: 3px !important;
}

p {
  font-size: 20px;
}

.container {
  display: flex;
  flex-direction: column;
}

.bm-search-input {
  padding: 8px 5px 7px 5px;
  margin-bottom: 5px;
  outline: none;
  border: none;
  border-bottom: 1px solid #eeeeee;
}

.bm-container {
  display: flex;
  flex-direction: column;
}

.bm-goods {
  display: flex;
  border-bottom: 1px solid #eeeeee;
}

.bm-goods:hover {
  background-color: #f1a2c2;
  color: white;
}

.bm-img {
  flex: 1;
}

.bm-image {
  height: 70px;
}

.bm-goods-info {
  flex: 4;
  display: flex;
  flex-direction: column;
}
</style>
